<template>
  <view class="cate_wrap">
    <view class="cate_list">
      <navigator
        class="cate_item"
        v-for="(item,index) in cateList"
        :key="index"
        :url="`/pagesB/coursesType/index?id=${item.id}&name=${item.name}`"
      >
        <image :src="item.avatarUrl"  />
        <view class="cate_name text-center">{{item.name}}</view>
      </navigator>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cateList: []
    };
  },
  mounted() {
    this.request({
      url:this.apiServer+"/coursesType/findAllCoursesType"
    }).then(res => {
      console.log(res);
      this.cateList = res.data;
    });
  }
};
</script>

<style lang="scss" scoped>
.cate_wrap {
  .cate_list {
    padding: 0 20rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .cate_item {
      align-self: center;
      justify-content: center;
      position: relative;
      width: 25%;
      border: 5rpx;
      display: flex;
      margin: 20rpx;
      height: 150rpx;
      image {
        height: 140rpx;
        width: 160rpx;
      }
      .cate_name {
        display: flex;
        position: absolute;
        bottom: -30rpx;
        align-self: center;
      }
    }
  }
}
</style>